<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="en">

<head th:replace="fragments/headTag :: headTag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Spreadsheet Template Builder App</title>

<!-- Bootstrap -->
<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"
	th:href="@{/webjars/bootstrap/3.0.3/css/bootstrap.css}"
	rel="stylesheet" />
<link href="../../../resources/css/navbar.css"
	th:href="@{/resources/css/navbar.css}" rel="stylesheet" />
<!-- JQuery -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>
<script
	src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/3.0.3/js/bootstrap.min.js}"></script>

<!-- Spring JS and Ajax -->
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript"
	th:src="@{/resources/spring/Spring-Dojo.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<div th:include="fragments/bodyHeader :: bodyHeader" th:remove="tag">This
			is the navigation bar here</div>
		<ol class="breadcrumb">
			<li th:text="#{breadcrumbs.template}">Template Selection</li>
			<li th:text="#{breadcrumbs.metadata}">Metadata Schema
				Configuration</li>
			<li th:text="#{breadcrumbs.metadataElements}">Metadata Elements
				Selection</li>
			<li class="active" th:text="#{breadcrumbs.review}">Review and
				Generate</li>
		</ol>
		<div class="row">
			<!-- DIV SIDE COLUMN -->
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{generate.column1.title}" class="panel-title">Generate
							Spreadsheet</h3>
					</div>
					<div class="panel-body">
						<form id="review" th:action="${flowExecutionUrl}" method="post">
							<p th:text="#{generate.column1.text1}">The spreadsheet will
								contain the following header types:</p>
							<ul>
								<li th:text="#{generate.column1.li.1}">Selected metadata
									elements from the schemas</li>
								<li th:if="${typeSS == 1}" th:text="#{generate.column1.li.2}">Special
									header to reference original QuDex files. This is the
									&quot;qudex:originalReference&quot; header. If the file
									described in the spreadsheet is not original (refer to
									documentation) then a reference to the location of the original
									one can be specified.</li>
							</ul>
							<h4 th:text="#{generate.column1.h4}">Review the included
								metadata elements</h4>
							<p th:if="${typeSS == 0}" th:text="#{generate.column1.text2}">Review
								the selected metadata elements that will be added to the
								Collection-level spreadsheet to be generated.</p>
							<p th:unless="${typeSS == 0}" th:text="#{generate.column1.text3}">Review
								the selected metadata elements that will be added to the
								File-level spreadsheet to be generated.</p>
							<p>
								<button class="btn btn-primary" type="submit"
									name="_eventId_backMetadata"
									th:text="#{generate.review.submit}"></button>
							</p>
							<h4 th:text="#{generate.column1.h42}">Restart the process</h4>
							<p th:text="#{generate.column1.text4}">Refresh the
								spreadsheet headers and start the process again</p>
							<p>
								<button class="btn btn-primary" type="submit"
									name="_eventId_start"
									th:text="#{generate.column.submit.restart}"></button>
							</p>
						</form>
					</div>
				</div>
			</div>
			<!-- END SIDE COLUMN -->
			<div class="col-md-8">
				<!-- MAIN COLUMN -->
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{generate.column2.title}" class="panel-title">Spreadsheet
							Headers Overview</h3>
					</div>
					<div class="panel-body">
						<ul class="nav nav-tabs">
							<li class="active"><a th:text="#{generate.column2.tab1}"
								href="#overview" data-toggle="tab">Metadata Overview</a></li>
							<li th:if="${typeSS == 0}"><a
								th:text="#{generate.column2.tab2}"
								href="#collection-spreadsheet" data-toggle="tab"></a></li>
							<li th:unless="${typeSS == 0}"><a
								th:text="#{generate.column2.tab2}" href="#files-spreadsheet"
								data-toggle="tab"></a></li>
						</ul>
						<div class="tab-content">
							<p></p>
							<div class="tab-pane fade in active" id="overview">
								<h4 th:text="#{generate.column2.form.title}">Metadata
									Elements Selected</h4>
								<p th:text="#{generate.column2.form.text1}"></p>
								<table th:if="${hasSchemas}" class="table">
									<tr>
										<th th:text="#{generate.column2.table.prefix}">Schema
											Prefix</th>
										<th th:text="#{generate.column2.table.name}">Schema Name</th>
										<th th:text="#{generate.column2.table.optional}">Optional
											Elements</th>
										<th th:text="#{generate.column2.table.compulsory}">Compulsory
											Elements</th>
									</tr>
									<tr th:each="elem : ${schemasSelected}"
										th:if="${!elem.isRemoved()}">
										<td th:text="${elem.getPrefix()}"></td>
										<td
											th:text="${elem.getReadableName()} ? ${elem.getReadableName()} : #{generate.column2.table.available}"></td>

										<!--optional elements-->
										<td th:text="${elem.getSelectedOptionalElements()}"></td>
										<td th:text="${elem.getSelectedCompulsoryElements()}"></td>
									</tr>
								</table>
							</div>
							<div th:if="${typeSS == 0}" class="tab-pane fade"
								id="collection-spreadsheet">
								<!-- DIV FOR COLLECTION SP -->
								<form id="confirm" th:action="${flowExecutionUrl}"
									class="form-horizontal" method="post"
									enctype="multipart/form-data">
									<fieldset>
										<legend th:text="#{generate.column2.form.title.col}">Auto
											fill-in DDI2 Study level metadata (optional)</legend>
										<p th:text="#{generate.column2.form.col.text1}"></p>
										<p th:text="#{generate.column2.form.col.text2}"></p>
										<div th:if="${files.zipFiles} != null and ${files.getZipFiles().size()} > 0" class="well">
											<table class="table">
												<tr>
													<th><img th:src="@{/resources/img/xml-icon.png}" /> <span
														th:text="#{generate.column2.file.table.zip.name}">Filename</span></th>
													<th th:text="#{generate.column2.file.table.zip.delete}">Delete</th>
												</tr>
												<tr th:each="file, stat : ${files.getZipFiles()}">
													<td th:text="${file.getOriginalFilename()}">the file
														name</td>
													<td><a
														th:href="@{'~' + ${flowExecutionUrl}(_eventId=deleteItem, removeElemIndex=__${stat.index}__)}"
														th:text="#{generate.column2.col.ddi.delete}"
														class="btn btn-danger btn-xs">Delete file</a></td>
												</tr>
											</table>
										</div>
										<div id="ddi-parse2" class="form-group">
											<label
												th:if="${flowRequestContext.messageContext.hasErrorMessages()}"
												class="col-md-4 control-label" for="sp-uploadzip-1"><span
												th:each="message : ${flowRequestContext.messageContext.getAllMessages()}"
												th:text="${message.text}" style="color: red;">The
													error message text here.</span></label> <label
												th:unless="${flowRequestContext.messageContext.hasErrorMessages()}"
												class="col-md-4 control-label" for="sp-uploadzip-1"><span
												th:text="#{generate.column2.ddi.label}"></span></label>
											<!-- /.col-lg-6 -->
											<div class="col-md-4">
												<div class="input-group">
													<div class="input-group">
														<span class="input-group-btn"> <span
															class="btn btn-primary btn-file"> <span
																th:text="#{generate.column2.col.ddi.inputFile}">Browse&hellip;</span><input
																id="sp-uploadzip-1" type="file" name="file"
																class="form-control" />
														</span><input type="text" class="form-control"
															readonly="readonly" />
														</span>
													</div>
													<span th:utext="#{upload.helpFiles2}" class="help-block">
														Select the file(s) to upload</span>
												</div>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-4 control-label" for="ddi"></label>
											<div class="col-md-4">
												<button id="ddi" class="btn btn-primary" type="submit"
													name="_eventId_addDdi"
													th:text="#{generate.column2.col.ddi.add}"></button>
											</div>
										</div>
									</fieldset>
									<div>
										<p th:text="#{generate.column2.col.ddi.addTip}">When
											finished adding DDI Codebook files, click &quot;Generate
											Spreadsheet&quot; button.</p>
										<button id="generate-b" class="btn btn-primary" type="submit"
											name="_eventId_confirm"
											th:text="#{generate.column2.file.zip.generate}"></button>
									</div>
								</form>
							</div>
							<div th:unless="${typeSS == 0}" class="tab-pane fade"
								id="files-spreadsheet">
								<!-- DIV FOR FILES SP -->
								<form id="confirm" method="post" class="form-horizontal"
									enctype="multipart/form-data">
									<fieldset>
										<legend th:text="#{generate.column2.form.title.file}">Attach
											ZIP(s) file(s) - optional</legend>
										<p th:utext="#{generate.column2.form.file.text1}"></p>
										<div
											th:if="${files.zipFiles} != null and ${files.getZipFiles().size()} > 0">
											<div class="well">
												<table class="table">
													<tr>
														<th><img th:src="@{/resources/img/zip-icon.png}" />
															<span th:text="#{generate.column2.file.table.zip.name}">Filename</span></th>
														<th th:text="#{generate.column2.file.table.zip.delete}">Delete</th>
													</tr>
													<tr th:each="file, stat : ${files.getZipFiles()}">
														<td th:text="${file.getOriginalFilename()}">the file
															name</td>
														<td><a
															th:href="@{'~' + ${flowExecutionUrl}(_eventId=deleteItem, removeElemIndex=__${stat.index}__)}"
															th:text="#{generate.column2.file.zip.delete}"
															class="btn btn-danger btn-xs">Delete ZIP file</a></td>
													</tr>
												</table>
											</div>
											<!-- <ul class="list-group">
												<li class="list-group-item"
													th:each="file, stat : ${files.getZipFiles()}"><img
													th:src="@{/resources/img/zip-icon.png}" /> <b
													th:text="#{generate.column2.file.zip.name}">ZIP Name:</b> <span
													th:text="${file.getOriginalFilename()}"></span> | <a
													th:href="@{'~' + ${flowExecutionUrl}(_eventId=deleteItem, removeElemIndex=__${stat.index}__)}"
													th:text="#{generate.column2.file.zip.delete}">Delete
														ZIP file</a></li>
											</ul>-->
											<p>
												<button class="btn btn-danger" type="submit"
													name="_eventId_deleteFiles"
													th:text="#{generate.column2.file.zip.button}"></button>
												<button class="btn btn-primary" type="submit"
													name="_eventId_addZipFiles"
													th:text="#{generate.column2.file.zip.upload2}"></button>
												<button id="generate-b" class="btn btn-primary"
													type="submit" name="_eventId_confirm"
													th:text="#{generate.column2.file.zip.generate}"></button>
											</p>
										</div>
										<div
											th:unless="${files.zipFiles} != null and ${files.getZipFiles().size()} > 0">
											<button class="btn btn-primary" type="submit"
												name="_eventId_addZipFiles"
												th:text="#{generate.column2.file.zip.upload}"></button>
											<button id="generate-b" class="btn btn-primary" type="submit"
												name="_eventId_confirm"
												th:text="#{generate.column2.file.zip.generate}"></button>
										</div>
									</fieldset>
								</form>
							</div>
						</div>
						<!-- DIV MD TABLE -->
					</div>
					<!-- DIV PANEL BODY -->
				</div>
				<!-- DIV PANEL -->
			</div>
			<!-- COLUMN RIGHT -->
		</div>
	</div>
	<div class="modal js-loading-bar">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<h4 th:text="#{generate.progressTitle}">Spreadsheet Generation</h4>
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-info" th:role="progressbar"
								th:aria-valuenow="100" th:aria-valuemin="0" th:aria-valuemax="100"
								style="width: 100%;"></div>
						</div>
						<span id="pbtext" class="hide" th:text="#{generate.pbMessage}">Generating spreadsheet&hellip;</span>
					</div>
				</div>
			</div>
		</div>
	<!-- DIV ROW -->
	<div id="footer" th:include="fragments/footer :: footer"></div>
	<!-- DIV CONTAINER -->
	<script>
		$(document).ready(function() {
			/*Tooltips*/
			$('[data-toggle="tooltip"]').tooltip({
				'placement' : 'top'
			});

			$('[data-toggle="popover"]').popover({
				trigger : 'hover',
				'placement' : 'top'
			});
			
			$('.js-loading-bar').modal({
				backdrop : 'static',
				show : false
			});
			
			$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
				//save the latest tab; use cookies if you like 'em better:
				localStorage.setItem('lastTab', $(this).attr('href'));
			});
			//go to the latest tab, if it exists:
			var lastTab = localStorage.getItem('lastTab');
			if (lastTab) {
				$('a[href=' + lastTab + ']').tab('show');
			} else {
				// Set the first tab if cookie do not exist
				$('a[data-toggle="tab"]:first').tab('show');
			}
		});
	</script>
</body>
</html>